<template>
  <div class="baseconfigcurd">
    <el-card>
      <div>
          <el-input placeholder="请输入名称" style="width: 20%;margin-right: 15px" clearable v-model="title" v-if="isSearch"></el-input>
        <el-button icon="el-icon-circle-plus-outline" round type="primary" @click="createCategory">新建{{categoryName}}
        </el-button>
      </div>
      <el-table style="margin-top: 15px" ref="sortableList"  row-key="pk" :data="getTitle" :tree-props="{ children: 'items' }" lazy>
        <el-table-column prop="name"  :label="categoryName"></el-table-column>
        <el-table-column  prop="description" align="center" label="内容"></el-table-column>
        <el-table-column label="操作" align="center" width="300" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" @click="updateCategory(scope.row)" round>编辑</el-button>
            <el-button type="primary" @click="addChildren(scope.row)" round v-if="isAddChild">增加下级</el-button>
            <el-button type="danger" @click="onDelete(scope.row)" round>删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <el-dialog :title="form.pk? '编辑' : '新增'" :visible.sync="showCreate" width="500px">
      <el-form label-width="120px" >
        <el-row>
          <el-col :span="20">
            <el-form-item :label="categoryName + '：'">
              <el-input  v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="内容 :">
              <el-input  v-model="form.description"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showCreate = false">取 消</el-button>
        <el-button type="primary" @click="onCreateSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const name = '<%= name %>';
const parent = '<%= parent %>';
const isAddChild = true; // 是否可增加子节点
const isSearch = true; // 是否可搜索
export default {
  /**
   * 基本信息的增删改组件
   * 需传入参数 categoryName: 基本配置项名称 、
   */
  name: 'BaseconfigCURD',

  data() {
    return {
      data: [],
      categoryPK: null,
      showCreate: false,
      form:{
        pk:null,
        name:'',
        description:'',
      },
      loading: false,
      categoryName: name,
      parent: parent,
      root: null,
      isAddChild,
      isSearch,
      title: null,
    };
  },
  computed: {
    getTitle(){
      if(this.title){
        let data = this.data.filter((item)=>item.name.indexOf(this.title) > -1);
        return data;
      }else{
        return this.data;
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.loading = true;
      try {
        let params = {name: name, isroot: true};
        let resp = await this.$resource.getObjFromList('basetree', params);
        this.data = resp.items;
        this.root = resp;
      } catch (err) {
        this.$message.error('加载数据错误！');
      }
      this.loading = false;
    },
    addChildren(val){
      this.form = {
        parent:val.pk,
      }
      this.showCreate = true;
    },
    createCategory() {
      this.form = {
        parent:this.root.pk,
        pk:null,
        description: null,
        name: null,
      }
      this.showCreate = true;
    },
    updateCategory(data) {
      this.form = {...data};
      this.showCreate = true;
    },
    async onCreateSubmit() {
      let { name } = this.form;
      if (!name) {
        this.$message.error(`请填写${this.categoryName}名称`);
      } else {
        if(this.form.pk){
          await this.$http.put(`/basetree/${this.form.pk}/`, this.form)
        }else{
          await this.$http.post('/basetree/', this.form)
        }
        this.showCreate = false;
        await this.init();

      }
    },
    async onDelete(row) {
      try {
        await this.$confirm(`此操作将永久删除  “ ${row.name} ”, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        await this.$http.delete(`/basetree/${row.pk}/`);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      } catch (e) {
        this.$message({
          type: 'info',
          message: '删除失败!'
        });
        return;
      } finally {
        this.page = 1;
        this.init();
      }
    }
  }
};
</script>

<style scoped>

</style>
